
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写文章</title>
    <style>
    *{margin:0;
    }
    ul{
        list-style: none;
    }
    .contexLi{
        float: left;
        width: 50px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    #movie{
        width: 800px;
        height: 250px;
        background-color: rgb(246,246,246);
        position: relative;
        left: 0;
        right: 0;
        margin: 0 auto;
        margin-top: 40px;
    }
    #overall{
        position: relative;
        left: 0;
        right: 0;
        margin:80px auto;
    }
    .inputs{
        width: 800px;
        height: 100%;
        position: relative;
        left: 0;
        height: 0;
        margin: 0 auto;
    }
    .content{
        border: none;
        width: 800px;
        height: 100px;
        font-size: 30px;
        font-weight: bold;
        vertical-align: middle;
    }
    .buttons{
        width: 800px;
        height: 50px;
    }
    #textareas{
        font-size: 25px;
        border: none;
    }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    window.onload=function(){
        document.getElementsByClassName('first')[1].onclick = function(){
            location.href="index.html"
        }
        document.getElementsByClassName('second')[0].onclick = function(){
            location.href="personal.html"
        }
    }

    function pictures(){
        document.querySelector('[type="file"]').click()
    }
    function showFlieInfo(that){
        var fileReader = new FileReader()
            var reg = /^imag/gi
            fileReader.readAsDataURL(that.files[0])
            var cal = reg.test(that.files[0].type)
            if((that.files[0].size/1024)<1024 && cal){
                fileReader.onload = function(e){
                console.log(e.target.result)
                document.querySelector('#imagess').src = e.target.result
            }            
            }else{
                alert("请你老实点")
            }
            document.querySelector('#pict').style.display = 'none'
            document.querySelector('#imagess').style.width = '800px'
            document.querySelector('#imagess').style.height= '250px'
        }
        function changeBlod(){
            document.querySelector('#textareas').style.fontWeight = "bold"
            console.log(document.querySelector('#textareas').style)
            console.log("字体加粗")
        }
        function changeAtx(){
            document.querySelector('#textareas').style.fontStyle = "italic"

        }
        function changeFont(){
            document.querySelector('#textareas').style.fontFamily = "宋体"

        }
</script>
</head>

<body>
       <!-- 通栏 -->
    <div id="Navigation"></div>



    <!-- 插入视频 -->
    <div id="overall">
    <div id="movie" onclick="pictures()">
        <img id="imagess" src="">
        <input type="file" style="display: none;" multiple onchange="showFlieInfo(this)">
        <div id="pict" style="text-align: center; line-height: 350px;"><svg t="1597737615073" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33670" width="100" height="100"><path d="M330.583 715.653c-17.464 0-49.162-9.931-57.184-47.151l-0.337-1.563 0.011-209.366c-0.129-2.978-0.287-14.776 4.345-27.586 7.264-20.091 22.906-33.05 44.048-36.498l52.007-8.874 19.729-48.802 0.561-0.955c5.772-9.818 22.288-26.435 47.572-26.435 2.872 0 5.81 0.216 8.753 0.642l127.04-0.641c0.647-0.04 1.584-0.079 2.77-0.079 8.485 0 37.357 2.277 52.653 31.58l0.3 0.573 18.35 44.019 53.417 8.634c1.612 0.286 39.568 7.491 46.165 48.81l0.188 1.175v218.157c-0.067 15.688-10.29 47.092-48.497 54.108l-1.344 0.247H331.078c-0.128 0.003-0.293 0.005-0.495 0.005z m-27.52-52.034c5.282 20.826 23.578 22.021 27.453 22.034l0.329-0.019 0.07 0.015h367.389c9.547-2.021 15.997-6.581 19.694-13.915 2.732-5.419 2.973-10.458 2.973-10.505V445.62c-3.62-18.979-20.425-22.694-21.543-22.919l-69.494-11.229-24.252-58.18c-7.342-13.475-20.442-14.944-25.783-14.944-0.424 0-0.72 0.012-0.858 0.019l-0.765 0.091-0.498-0.034-130.007 0.656-1.261-0.21a31.71 31.71 0 0 0-5.174-0.444c-12.314 0-19.41 8.46-21.305 11.069l-25.015 61.88-68.684 11.719c-24.877 4.029-23.366 31.955-23.29 33.142l0.031 0.966-0.01 206.417z" fill="#BB2748" p-id="33671"></path><path d="M512.022 641.311c-60.357 0-109.461-49.102-109.461-109.456 0-60.351 49.104-109.45 109.461-109.45 60.339 0 109.428 49.099 109.428 109.45 0 60.354-49.089 109.456-109.428 109.456z m0-188.906c-43.815 0-79.461 35.641-79.461 79.45 0 43.813 35.646 79.456 79.461 79.456 43.797 0 79.428-35.644 79.428-79.456 0-43.809-35.631-79.45-79.428-79.45z" fill="#BB2748" p-id="33672"></path><path d="M512.013 93.174C280.69 93.174 93.182 280.695 93.182 512c0 231.307 187.508 418.826 418.831 418.826 231.315 0 418.806-187.52 418.806-418.826-0.001-231.305-187.491-418.826-418.806-418.826z m-0.001 819.795c-221.459 0-400.973-179.524-400.973-400.969 0-221.442 179.514-400.969 400.973-400.969 221.453 0 400.949 179.526 400.949 400.969 0 221.444-179.496 400.969-400.949 400.969z" fill="#BB2748" p-id="33673"></path></svg></div>
    </div>
    <div class="inputs">
    <input class="content" type="text" placeholder="请输入标题，最多50个字">
    <div class="buttons">
        <ul style="margin: 0; padding: 0;">
            <li class="contexLi" onclick="changeBlod()"><svg t="1597744234821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="717" width="30" height="30"><path d="M694.021847 492.679245a208.460775 208.460775 0 0 1 112.873883 74.740815 197.275074 197.275074 0 0 1 37.624627 118.975173 234.899702 234.899702 0 0 1-34.065541 123.551142A203.376365 203.376365 0 0 1 711.817279 892.313803a440.309831 440.309831 0 0 1-168.802383 26.438928h-254.220457a50.844091 50.844091 0 0 1-50.844091-50.844091V168.802383a50.844091 50.844091 0 0 1 50.844091-50.844091h249.644489q145.922542 0 203.376365 63.555114a203.376365 203.376365 0 0 1 59.996028 140.838133 180.496524 180.496524 0 0 1-27.45581 97.112215 206.935452 206.935452 0 0 1-80.333664 73.215491z m-323.368421-39.14995h147.956306A563.860973 563.860973 0 0 0 610.129096 447.428004a122.53426 122.53426 0 0 0 64.063555-31.523337 101.688183 101.688183 0 0 0 27.964251-79.825223A111.34856 111.34856 0 0 0 672.667329 254.220457a121.008937 121.008937 0 0 0-67.114201-33.04866 681.310824 681.310824 0 0 0-101.688183-6.101291H370.653426a25.422046 25.422046 0 0 0-25.422046 25.422046v187.614697a25.422046 25.422046 0 0 0 25.422046 25.422046z m0 370.144985h173.886792a227.781529 227.781529 0 0 0 148.464747-36.607746 127.618669 127.618669 0 0 0 41.692155-101.688182 124.059583 124.059583 0 0 0-44.234359-101.688183 259.304866 259.304866 0 0 0-159.650447-36.099305H370.653426a25.422046 25.422046 0 0 0-25.422046 25.422046v225.239324a25.422046 25.422046 0 0 0 25.422046 25.422046z" fill="#666666" p-id="718"></path></svg></li>
            <li class="contexLi" onclick="changeAtx()"><svg t="1597744367077" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1010" width="30" height="30"><path d="M602.530909 162.909091l-87.458909 721.454545H616.727273a34.909091 34.909091 0 0 1 0 69.818182h-279.272728a34.909091 34.909091 0 0 1 0-69.818182h107.287273l87.458909-721.454545H430.545455a34.909091 34.909091 0 0 1 0-69.818182h279.272727a34.909091 34.909091 0 0 1 0 69.818182h-107.287273z" fill="#797979" p-id="1011"></path></svg></li>
            <li class="contexLi"><svg t="1597744424999" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1997" width="30" height="30"><path d="M804.1984 599.3984a51.2 51.2 0 0 1-72.3968-72.3968l93.696-93.696A56.32 56.32 0 0 1 921.6 473.1904V870.4a51.2 51.2 0 0 1-102.4 0v-286.0032l-15.0016 15.0016zM204.8 460.8h358.4V153.6a51.2 51.2 0 0 1 102.4 0v716.8a51.2 51.2 0 0 1-102.4 0v-307.2H204.8v307.2a51.2 51.2 0 0 1-102.4 0V153.6a51.2 51.2 0 1 1 102.4 0v307.2z" fill="#666666" p-id="1998"></path></svg></li>
            <li class="contexLi"><svg t="1597744549271" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="676" width="30" height="30"><path d="M477.934459 330.486594A50.844091 50.844091 0 0 1 406.752731 258.796425L512 152.532274a254.220457 254.220457 0 0 1 359.467726 359.467726L762.66137 618.772592a50.844091 50.844091 0 1 1-71.690168-71.690169l106.772591-106.772592a152.532274 152.532274 0 0 0-215.578947-215.578947z m70.164846 361.501489A50.844091 50.844091 0 1 1 619.789474 762.66137l-107.281033 107.281033A254.220457 254.220457 0 0 1 152.532274 512L259.813307 406.752731a50.844091 50.844091 0 1 1 72.19861 69.656405l-107.789474 107.281033a152.532274 152.532274 0 0 0 215.578947 215.578947z m-126.601788-16.77855a50.844091 50.844091 0 1 1-71.690168-71.690169l251.678252-251.678252a50.844091 50.844091 0 0 1 71.690169 71.690169z" fill="#666666" p-id="677"></path></svg></li>
            <li class="contexLi"><svg t="1597744593615" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="695" width="30" height="30"><path d="M512 928H128a32 32 0 0 1-26.88-49.92L345.6 512 101.12 145.92A32 32 0 0 1 128 96h384a32 32 0 0 1 0 64H187.52l223.36 334.08a33.28 33.28 0 0 1 0 35.84L187.52 864H512a32 32 0 0 1 0 64zM640 928a36.48 36.48 0 0 1-17.92-5.12 32.64 32.64 0 0 1-8.96-44.8l256-384a32 32 0 0 1 53.76 35.84l-256 384a33.28 33.28 0 0 1-26.88 14.08z" fill="#4D4D4D" p-id="696"></path><path d="M896 928a33.28 33.28 0 0 1-26.88-14.08l-256-384a32 32 0 1 1 53.76-35.84l256 384a32.64 32.64 0 0 1-8.96 44.8 36.48 36.48 0 0 1-17.92 5.12z" fill="#4D4D4D" p-id="697"></path></svg></li>
            <li class="contexLi" onclick="changeFont()">
                <svg t="1597745842692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2126" width="30" height="30"><path d="M609.28 232.32H152.96V404.48h100.48V332.8h127.36v417.92H306.56v100.48h249.6v-100.48H481.28V332.8h128v71.68h100.48V232.32H609.28z" fill="#231815" p-id="2127"></path><path d="M812.8 492.16H547.84v99.84h58.24V550.4h74.24v242.56h-42.88v58.24H782.08v-58.24h-43.52V550.4h74.24v41.6h58.24V492.16h-58.24z" fill="#231815" p-id="2128"></path></svg>
            </li>
        </ul>
    </div>
    <div>
        <textarea name="" style="width: 800px;" id="textareas" cols="30" rows="10" placeholder="请输入正文"></textarea>
    </div>  
</div>
</div>

<script>
    $("#Navigation").load("Navigation.html");
</script>
</body>
</html>